import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { getPageFlag } from 'services/utils'
import QueryTable from '../components/query-table'
import { Popconfirm, message, Dropdown, Menu, Icon } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { protoActions } from 'reduxs'
import moment from 'moment' 

const MenuItem = Menu.Item
const accessFlag = getPageFlag('/proto-tool/role-advice', 'access')

@connect(
  state => ({
    auth                : state.Passport.auth,
    rtsp_key            : state.Passport.rtsp_key,
    parser              : state.Proto.parser,
    postDataPending     : state.Proto.postDataPending,
    postDataError       : state.Proto.postDataError,
    postDataMessage     : state.Proto.postDataMessage,
    postData            : state.Proto.postData,
    postDataProto       : state.Proto.postDataProto,
    ADVICE_MAIL         : state.Proto.ADVICE_MAIL
  }),
  dispatch => ({
    actions: bindActionCreators({ 
      ...protoActions
    }, dispatch)
  })
)
export default class RoleAdvice extends PureComponent {
  
  componentWillReceiveProps (nextProps) {
    const { postDataError, postDataMessage, postDataProto, postData, rtsp_key } = nextProps
    if (rtsp_key !== this.props.rtsp_key) {
      return
    }
    if (postDataProto === 'update_role_advice' && postDataError === 0 && this.props.postDataError === -1) {
      message.success('受理意见已提交！')
    }
  }

  render () {
    const { location } = this.props
    let options = {
      layoutOptions: {
        location,
        pageCode: accessFlag.value,
        breadcrumb: [
          { name: '主页', link: '/' },
          { name: '运营工具类' },
          { name: '用户建议汇总' }
        ],
      },
      searchOptions: {
        begin_end: {
          name: '时间段',
          format: 'YYYY-MM-DD',
          required: { required: true, message: `请选择时间段!` }
        },
      },
      proto: 'role-advice',
      tableColumns: [ 
        {
          key: '1',
          title: '日期',
          dataIndex: 'begin',
          render: (begin) => moment(Number(begin)).format('YYYY-MM-DD HH:mm:ss'),
          width: 180
        },
        {
          key: '2',
          title: '玩家ID',
          dataIndex: 'roleId',
          //render: (record) => <span></span>
          width: 150
        },
        {
          key: '3',
          title: '反馈内容',
          dataIndex: 'content',
        },
        {
          key: '4',
          title: '充值金额',
          dataIndex: 'amount',
          width: 100
        },
        {
          key: '5',
          title: '创号时间',
          dataIndex: 'createAt',
          render: (createAt) => moment(Number(createAt)).format('YYYY-MM-DD HH:mm:ss'),
          width: 180
        },
        {
          key: '6',
          title: '玩家名',
          dataIndex: 'roleName',
          width: 100
        },
        {
          key: '7',
          title: '操作',
          dataIndex: 'actions',
          render: (text, record) => record.status === '0' ? (
            <Dropdown
              overlay={(
                <Menu className="app-header-menu" onClick={this.handleClickActions.bind(this, _.pick(record, ['begin', 'roleId']))}>
                  <Menu.Item 
                    key={'1'} 
                    className={`app-header-menu-span`}
                    >
                    受理
                  </Menu.Item>
                  <Menu.Item 
                    key={'2'}
                    className={`app-header-menu-span`}
                    >
                    不受理
                  </Menu.Item>
                </Menu>
              )}
              trigger="click"
              >
              <a className="ant-dropdown-link">
                未受理 <Icon type="down" />
              </a>
            </Dropdown>
          ) : (
            <span>{record.status === '1' ? '已受理' : '不受理'}</span>
          ),

          filters: [
            { text: '未受理', value: '0' },
            { text: '已受理', value: '1' },
            { text: '不受理', value: '2' },
          ],
          onFilter: (value, record) => record.status.includes(value),
          width: 150
        }
      ],
      tableScroll: {  },
      tablePagination: true,
      dataFields: ['date', 'roleId', 'content', 'status', 'amount', 'createAt', 'roleName', 'begin'],
      refresh: true,
      //remark: []

    }
    return (
      <QueryTable  {...options} />
    )
  }

  handleClickActions = (ret, { key }) => {
    let info = {
      ...ret,
      otherInfo: key
    }
    console.log(info)
    this.props.actions.postData('update_role_advice', info, this.props.rtsp_key)
  }
}